refactor(global-search): keep browser focus but allow for keyboard nav#450
refactor(global-search): keep browser focus but allow for keyboard nav#450elmarburke merged 3 commits intomainfrom
Conversation
elmarburke
force-pushed
the
global-search/keep-focus
branch
from
ecb6ace to
e45732a
Compare
|
The specified QA steps are all ok but we shouldn't set the focus on the headers when clicking. See in the video CleanShot.2025-09-23.at.14.37.24.mp4 |
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
| aria-expanded={isExpanded} | ||
| {...focusProps} | ||
| {...props} | ||
| {...getFocusProps(headerId(entry.id))} |
There was a problem hiding this comment.
Bug: Group Headers Incorrectly Activate on Click
Group headers become active when clicked, which isn't the intended behavior and creates an inconsistency with keyboard navigation that correctly skips them. The getFocusProps function in SelectionProvider sets any focused item as active, including headers.
Additional Locations (1)
There was a problem hiding this comment.
That's very much intended here!
|
@kaloyanvi the header focus is now removed on navigation |
Yes thats fixed now! Theres still another issue with the focus when tabbing and shift-tabbing.
|
|
Headers are focusable on tab by design. Every item should be reachable with the tab key. That's why they are "partially" out of sync: With tab, you move the (real) browser focus. IMHO, we shouldn't block elements from being reached here. |
yeah thats fair! But now feels strange that arrow keys after tabbing continues correctly but tabbing after arrow keys brings you back to the start. |
…vigation - Removed useFocusHandlers and integrated useSelection for focus handling in GroupHeader, Match, and SearchInput components. - Updated ResultsList to manage virtual item IDs with useSelection. - Removed unused useFocus utility file. - Adjusted SearchScene to use SelectionProvider for context management.
elmarburke
force-pushed
the
global-search/keep-focus
branch
from
2c0ce55 to
7a4c8b6
Compare
|
QA ✅ |
|
As discussed offline: Split the tab and the arrow key navigation into two different things. Added an outline with focus-visbile to visually seperate the virtual and the real focus state. |
2 participants
Description
Changing how items are focused during keyboard navigation. Previously, the native focus was on the results. That blocked users from typing ahead. Now, it uses a "virtual focus" so typing remains possible.
react-ariaTesting